<template>
	<div>
		<!-- 面包屑 -->
		<div>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">网页页面</el-breadcrumb-item>
				<el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
				<el-breadcrumb-item>门店管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>


		<!-- 输入框 -->
		<div style="margin-top:10px;">
			<el-form :inline="true">

				<el-form-item label="门店名称:">
					<el-input v-model="queryInfo.keyword" placeholder="请输入门店名称"></el-input>
				</el-form-item>

				<el-form-item label="门店手机号:">
					<el-input v-model="queryInfo.phone" placeholder="请输入门店手机号"></el-input>
				</el-form-item>

				<el-form-item label="创建时间:">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>


				<el-form-item>
					<el-button type="primary" @click="queryCommunityList">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>


		<!-- 搜索 -->
		<div style="margin-bottom:10px;">
			<el-button type="primary" @click="addCommunity">新增门店</el-button>
		</div>


		<!-- 表格展示数据 -->
		<div>
			<template>
				<el-table stripe :data="communityList" style="width: 100%" border
					:header-cell-style="{ backgroundColor:'#eee'}">
					<el-table-column prop="shopName" label="门店">
					</el-table-column>
					<el-table-column prop="shopId" label="ID">
					</el-table-column>
					<el-table-column prop="shopPhone" label="门店手机号">
					</el-table-column>
					<el-table-column prop="shopAddress" label="门店地址">
					</el-table-column>
					<el-table-column prop="shopDescribe" label="营业时间">
					</el-table-column>
					<el-table-column prop="shopGoodsList" label="关联小区">
					</el-table-column>
					<el-table-column prop="shopUserId" label="订单总数">
					</el-table-column>
					<el-table-column prop="shopPassword" label="提交方式">
					</el-table-column>
					<el-table-column prop="createTime" label="状态">
						<el-button type="text">已下架</el-button>

					</el-table-column>
					<el-table-column label="操作">
						<!-- 使用作用域插槽 -->
						<template slot-scope="scope">
						   <el-button type="text">门店管理</el-button>
						    <el-button type="text" @click="editCommunity(scope.row)">修改门店资料</el-button>
						</template> 
						
					</el-table-column>
				</el-table>
			</template>
		</div>



		<!-- 分页 -->
		<div style="margin-top:10px;">
			<!-- current-page：要访问的页码
			page-sizes：可选择的每页展示的条数
			page-size：每页展示的条数
			total：数据总条数
			@size-change：当选择页码时触发的事件
			@current-change:当每页展示的条数发生改变时，触发的函数
			 -->
			<el-pagination :current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="100"
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>


		<!-- 添加或修改小区对话框 
		:visible.sync:是否显示出来先随便定义一个变量
		label-width：设置样式长短
		-->
		<el-dialog :title='title' :visible.sync="show" @click="cancel">
			<el-form :model="community">

				<el-form-item label="门店名称:" label-width="100px">
					<el-input autocomplete="off" placeholder="请输入小区名称" v-model="community.shopName"></el-input>
				</el-form-item>

				<el-form-item label="门店手机号:" label-width="100px">
					<el-input autocomplete="off" placeholder="请输入门店手机号" v-model="community.shopPhone"></el-input>
				</el-form-item>

				<el-form-item label="所属地区:" label-width="100px">
					<el-cascader v-model="address" :options="citys"></el-cascader>
					<el-input autocomplete="off" placeholder="请输入小区详细地址" v-model="community.shopAddress"></el-input>
				</el-form-item>

				<el-form-item label="小区坐标:" label-width="100px">
					<el-button @click="getGeo">获取位置</el-button>
					<span v-show="community.shopLatitude">{{community.shopLatitude}},{{community.shopLongitude}}</span>
				</el-form-item>

				<el-form-item label="营业时间:" label-width="100px">
					<el-input autocomplete="off" placeholder="请输入营业时间" v-model="community.shopDescribe"></el-input>
				</el-form-item>


			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="updateCommunity">确 定</el-button>
			</div>
		</el-dialog>



	</div>
</template>

<script>
	//导入省市区数据
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				// 查询信息对象
				queryInfo: { //模糊查询中的所有的数据参数
					name: '',
					keyword: '', // 小区名称
					startTime: '', // 开始时间
					endTime: '', // 结束时间
					pageNum: 1, // 页码
					pageSize: 10, // 每页展示条数
					phone: '',
				},
				total: 5, //数据总条数
				date: '',
				communityList: [],

				//对话框内容
				title: '增加门店',
				show: false,
				citys: citys,
				address: [],
				community: { //门店对象
					shopAddress: "", //详细地址
					shopCity: "", //市区
					shopDescribe: "", //时间
					shopDistrict: "", //区
					shopImage: "",
					shopLatitude: "", //经度
					shopLongitude: "", //维度
					shopName: "", //门店
					shopPhone: "", //手机号
					shopProvince: "", //省份
				},
			}
		},
		methods: {
			//去修改的页面显示到弹出框
			editCommunity(row) {
				this.community = row;
				this.show = true;
				this.title = "编辑门店信息";
				this.address = [
					this.community.shopProvince,
					this.community.shopCity,
					this.community.shopDistrict,
				];
				
			},
			//添加数据
			updateCommunity() {
				if(this.title=='增加门店'){
					this.$http.post('shop/addShop', this.community)
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('添加成功！');
							this.show = false;
							this.queryCommunityList();
							this.cancel()
						} else {
							this.$message.error('添加失败!')
						}
					})
					.catch(err=>{
						this.$message.error('服务器异常!')
					})
				}else if(this.title=="编辑门店信息"){
					this.$http.post('shop/modifyShop', this.community)
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('修改成功！');
							this.show = false;
							this.queryCommunityList();
							this.cancel()
						} else {
							this.$message.error('修改失败!')
						}
					})
					.catch(err=>{
						this.$message.error('服务器异常!')
					})
				}
				
					
			},
			//获取经纬度坐标
			getGeo() {
				//如果没有选着省市区，则不可以获取经纬度
				if (!this.community.shopProvince) {
					this.$message.error("请选择省市区")
					return false;
				}
				let addr =
					this.community.shopProvince +
					this.community.shopCity +
					this.community.shopDistrict +
					this.community.shopAddress;
				//获取经纬度接口
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							key: '457886b5972a97e93fb9cdccebfd450f',
							address: addr
						}
					})
					//找到经纬度，前后拆分经纬度
					.then(res => {
						// console.log(res)
						// console.log(res.data.geocodes.location)
						let loc = res.data.geocodes[0].location
						this.community.shopLongitude = loc.split(',')[0];
						this.community.shopLatitude = loc.split(',')[1];
						console.log(this.community)
					})
			},
			
			//取消按钮
			cancel() {
				this.show = false;
				this.community = { //门店对象
					shopAddress: "", //详细地址
					shopCity: "", //市区
					shopDescribe: "", //时间
					shopDistrict: "", //区
					shopImage: "",
					shopLatitude: "", //经度
					shopLongitude: "", //维度
					shopName: "", //门店
					shopPhone: "", //手机号
					shopProvince: "", //省份
				};
				this.address = [];
			},
			//点击新增门店显示对话框内容
			addCommunity() {
				this.show = true;
				this.title = "增加门店";

			},
			handleSizeChange(val) {
				//console.log(`每页$ {val}条`);
				this.queryInfo.pageSize = val;
				this.queryInfo.pageNum = 1;
				this.queryCommunityList();
			},
			handleCurrentChange(val) {
				//console.log(`当前页： $ {val}`);
				this.queryInfo.pageNum = val;
				this.queryCommunityList()
			},
			//查询所有的小区信息函数
			queryCommunityList() {
				this.$http.get('shop/querySearchShopList', {
						params: this.queryInfo
					})

					.then(res => {
						//console.log(res.data)
						if (res.data.status == 200) {
							//console.log(res.data.data.list)
							this.communityList = res.data.data.list
							//动态赋予数据总条数
							this.total = res.data.data.total;
						} else {
							this.$message.error('服务器接口异常！')
						}
					})
					.catch(err => {
						this.$message.error('服务器接口异常！')
					})
			}
		},
		mounted() { //钩子函数--页面加载后直接执行的代码块
			this.queryCommunityList()
		},
		watch: {
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0];
					this.queryInfo.endTime = this.date[1];
				} else {
					this.queryInfo.startTime = ""
					this.queryInfo.endTime = ""
				}
			},
			address() {
				this.community.shopProvince = this.address[0];
				this.community.shopCity = this.address[1];
				this.community.shopDistrict = this.address[2];
			},
		},
	}
</script>

<style>
</style>